<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: huangfei
  Date: 2019/2/19
  Time: 12:02 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>和之初幸运大转盘抽奖</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style type="text/css">
        *{padding:0;margin:0;}
        body,html{
            width: 100%;
            height: 100%;
            text-align: center;
            background-color: #1664ad;
        }
        .wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            /*margin: auto;*/
            /*margin-top: 10%;
            position: relative;*/
        }

        .outer {
            width: 60%;
            /*height:60%;*/
        }

        .outer img{
            width: 100%;
            height: auto;
            /*height:100%;*/
        }

        .inner{
            position: absolute;
            width: 15%;
            /*height: 30%;*/
            /*top:34%;*/
            left:42.5%;
        }

        .inner img{
            width: 100%;
            height:30%;
        }

        .record{
            position: absolute;
            bottom: 20%;
            color:red;
        }

        .cout{
            color:red;
            position: absolute;
            top: 20%
        }
    </style>
</head>
<body>
<div class="wrapper">

    <div class="cout">
        <span>抽奖次数</span><span id="cn">0</span><span>次</span>
    </div>

    <div class="outer">
        <img  id="rolltable" src="<c:url value="/resources/images/ly-plate.png"/>">
    </div>
    <div class="inner">
        <img src="<c:url value="/resources/images/activity-lottery-2.png"/>">
    </div>

    <!--服务器调取中奖纪录-->
    <div class="record">
        <span>中奖纪录</span>
        <ul  id="ol">
           <c:forEach items="${playerVos}" var="pv" varStatus="vs">
               <li>${pv.name}抽中${pv.content}</li>
           </c:forEach>
        </ul>
    </div>

</div>
<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 id="gifC" class="text-center">恭喜您获得XX等奖</h1>
            </div>
            <div class="modal-body">
                请截图发给管理员
                <!--  <form class="form-group" action="">
                         <div class="form-group">
                             <label for="">用户名</label>
                             <input class="form-control" type="text" placeholder="6-15位字母或数字">
                         </div>
                        <div class="form-group">
                             <label for="">密码</label>
                             <input class="form-control" type="password" placeholder="至少6位字母或数字">
                         </div>
                         <div class="form-group">
                             <label for="">再次输入密码</label>
                             <input class="form-control" type="password" placeholder="至少6位字母或数字">
                         </div>
                         <div class="form-group">
                             <label for="">邮箱</label>
                             <input class="form-control" type="email" placeholder="例如:123@123.com">
                         </div>
                         <div class="text-right">
                             <button class="btn btn-primary" type="submit">提交</button>
                             <button class="btn btn-danger" data-dismiss="modal">取消</button>
                         </div>
                         <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
                 </form> -->
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="${weburl}resources/js/lottery/jQueryRotate.2.2.js"></script>

<script type="text/javascript" src="${weburl}resources/js/lottery/jquery.easing.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function() {

        //从服务器获取中奖次数
        let count = ${count};

        $("#cn").html(count)

        let canClick = true;
        <c:if test="${count==0&&empty playerVos}">
        alert("您这一轮的抽奖还没开始!")
        canClick = false
        </c:if>


        let  roateF = function(sort){
            let other = [56,125,200,245]
            let result = 0
            let rx = 10+Math.floor(Math.random()*20);

            if(sort ==1){
                result =  (45-rx)+360*2;
            }else if(sort ==3){
                result =  (45*4-rx)+360*2;
            }else if(sort ==2){
                result =  (45*7-rx)+360*2;
            }else {
                result = other[Math.floor(Math.random()*4)]+360*2
            }

            return result
        }





        $(".inner").click(function(){

            if(!canClick){
                return
            }
            if(count<1){
                alert("对不起,您的抽奖资格已经用光");
                return;
            }
            canClick = false;
            //从服务器获取中奖
            let url = "<c:url value='/gift'/>"
            let param = {
                lid:1
            }
            $.get(url,param,function (response,status,xhr) {
                let res = response.data
                res = $.parseJSON(res)
                let sort = res.sort;
                console.log(res.name)
                console.log(res.content)

            count--;
            $("#cn").html(count)
            let roateN = roateF(sort)
            if(res.content.indexOf("再接再厉")>-1){
                $("#gifC").html("再接再厉")
            }else {
                $("#gifC").html("恭喜"+res.name+"获得"+res.content)
            }
            $('#rolltable').rotate({
                angle: 0,
                animateTo: roateN,
                duration: 3000,
                callback: function(){
                    canClick = true;
                    $("#register").modal("toggle");
                    $("#ol").append($("<ul>抽奖获得"+res.content+"</ul>"))
                },
                easing: $.easing.easeInOutQuad,
            });
            })

        })

        //setInterval(function(){ $("#register").modal("toggle"); }, 5000);

    });
</script>
</body>

</html>
